<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<script type="text/javascript"src="js/jquery-1.12.4.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
			<div class="top" id="top">
				
			</div>
			<div class="first_cont">
				<img class="first" src="img/title.png" alt="" />
			</div>
			<div class="second">
				<div class="second_2"></div>
				<div class="second_1"></div>
				<div  class="second_3">
					<img src="img/box_3_01.png" />
					<div class="more">
						<img class="more_icon" src="img/icon-add.png" />
						<div class="ci">
							次卧有榻，扩容多约一倍，能睡能纳，一举两得
							<p class="liao">了解详情</p>
						</div>
					</div>
					<div class="more_1">
						<img class="more_icon"style="left: 20px;top: 20px;" src="img/icon-add.png"/>
						<div class="ci_1">
							书房有榻，功能多约一倍，休闲收纳两不误
							<p class="liao">了解详情</p>
						</div>
					</div>
					<div class="hot">
						<span class="re">热</span>
					</div>
					<div class="hot"style="left: 400px;">
						<span class="re">热</span>
					</div>
					<div class="hot"style="width: 350px;height: 300px;left: 700px;bottom: 60px;">
						<span class="re"style="margin-right: 110px;">热</span>
					</div>
				</div>
				
				
			</div>
			<div class="third">
				<div class="third_1"></div>
				<div class="third_2">
					<img src="img/box_3_02.png" />
					<div class="more_2">
						<img class="more_icon" src="img/icon-add.png" />
						<div class="ci_2">
							敞开设计注重收纳可视性，一目了然，敞亮大气
							<p class="liao">了解详情</p>
						</div>
					</div>
					<div class="more_3">
						<img class="more_icon" src="img/icon-add.png" />
						<div class="ci_3">
							置顶设计专注收纳最大化，规整一点，实用很多
							<p class="liao">了解详情</p>
						</div>
					</div>
					<div class="more_4">
						<span class="re"style="margin-top: 10px;">热</span>
					</div>
					<div class="more_5">
						<div class="re">热</div>
					</div>
					<div class="more_6">
						<span class="re">热</span>
					</div>
				</div>
				<div class="third_3"></div>
				<div class="third_4"></div>
			</div>
			<div class="four">
				<div class="four_1"></div>
				<div class="four_2">
					<img src="img/box_3_03.png" alt="" />
					<div class="more_7">
						<img class="more_icon" src="img/icon-add.png" />
						<div class="ci_4">
							一体贴墙定制腾出更多空间，宽敞一点，活动更自如
							<p class="liao">了解详情</p>
						</div>
						<div class="bai">
							<span class="re" style="margin-top: 20px;">热</span>
						</div>
						<div class="bai" style="left: 270px;">
							<span class="re" style="margin-top: 20px;">热</span>
						</div>
						
					</div>
				</div>
				<div class="third_3"></div>
				<div class="third_4"style="height: 70px;margin-top: -2px;"></div>
			</div>
			<div class="five">
				<div class="five_1"></div>
				<div class="five_2">
					<img src="img/box_3_04.png"/>
					<div class="more_8">
						<img class="more_icon" src="img/icon-add.png" />
						<div class="ci_2">
							企业E0级环保取材，健康一点，成长无忧
							<p class="liao">了解详情</p>
						</div>
					</div>
					<div class="more_9">
						<img class="more_icon" src="img/icon-add.png" />
						<div class="ci_4">
							置顶设计专注收纳最大化，规整一点，实用很多
							<p class="liao">了解详情</p>
						</div>
					</div>
					<div class="chuang">
						<span class="re" style="margin-top: 20px;">热</span>
					</div>
					<div class="chuang"style="width: 200px;height: 230px;left: 530px;bottom: 100px;">
						<span class="re" style="margin-top: 20px;">热</span>
					</div>
					<div class="chuang"style="width: 200px;height: 230px;left: 800px;bottom: 100px;">
						<span class="re" style="margin-top: 20px;">热</span>
					</div>
				</div>
				<div class="third_3"></div>
				<div class="third_4"></div>
			</div>
			<div class="six">
				<div class="third_3"></div>
				<div class="six_1"></div>
				<div class="six_2">
					<img src="img/box_3_05.png" alt="" />
					<div class="more_10">
						<img class="more_icon" src="img/icon-add.png" />
						<div class="ci_4">
							转角合理规划，纳更多，鸡肋空间变“废”为宝
							<p class="liao">了解详情</p>
						</div>
					</div>
					<div class="more_10"style="left: 520px;top: 460px;">
						<img class="more_icon" src="img/icon-add.png" />
						<div class="ci_4">
							人性化按需适配格局，方便一点，干净很多
							<p class="liao">了解详情</p>
						</div>
					</div>
					<div class="gui">
						<span class="re">热</span>
					</div>
					<div class="gui"style="left: 750px;top: 160px;">
						<span class="re">热</span>
					</div>
				</div>
				<div class="third_4"style="height: 200px;"></div>
			</div>
			<div class="first_cont">
				<img class="first" src="img/title-2.png" style="margin-top: -20px;"/>
				<ul class="feng">
					<li class="feng_1">现代简约</li>
					<li >自然田园</li>
					<li >浪漫简欧</li>
					<li >雅致古典</li>
				</ul>
			</div>
			<div class="style">
				<ul class="style_cont">
					<!--现代简约-->
					<li>
						<div class="style_left">
							<img src="img/1-left.jpg"style="width: 100%;height: 600px;" />
						</div>
						<div class="style_right">
							<div class="jian">
								<img src="img/1-big-1.jpg" alt="" />
								<img src="img/1-big-2.jpg" alt="" />
								<img src="img/1-big-3.jpg" alt="" />
								<img src="img/1-big-4.jpg" alt="" />
								<img src="img/1-big-5.jpg" alt="" />
								<img src="img/1-big-6.jpg" alt="" />
								<img src="img/1-big-7.jpg" alt="" />
							</div>
							<div class="yue">
								<img src="img/1-big-1.jpg" alt="" />
								<img src="img/1-big-2.jpg" alt="" />
								<img src="img/1-big-3.jpg" alt="" />
								<img src="img/1-big-4.jpg" alt="" />
								<img src="img/1-big-5.jpg" alt="" />
								<img src="img/1-big-6.jpg" alt="" />
								<img src="img/1-big-7.jpg" alt="" />
							</div>
						</div>
					</li>
					<!--自然田园-->
					<li>
						<div class="style_left">
							<img src="img/2-left.jpg"style="width: 100%;height: 600px;" />
						</div>
						<div class="style_right">
							<div class="jian_2">
								<img src="img/2-big-1.jpg" alt="" />
								<img src="img/2-big-2.jpg" alt="" />
								<img src="img/2-big-3.jpg" alt="" />
								<img src="img/2-big-4.jpg" alt="" />
								<img src="img/2-big-5.jpg" alt="" />
								<img src="img/2-big-6.jpg" alt="" />
								<img src="img/2-big-7.jpg" alt="" />
							</div>
							<div class="yue_2">
								<img src="img/2-big-1.jpg" alt="" />
								<img src="img/2-big-2.jpg" alt="" />
								<img src="img/2-big-3.jpg" alt="" />
								<img src="img/2-big-4.jpg" alt="" />
								<img src="img/2-big-5.jpg" alt="" />
								<img src="img/2-big-6.jpg" alt="" />
								<img src="img/2-big-7.jpg" alt="" />
							</div>
						</div>
					</li>
					<!--浪漫简欧-->
					<li>
						<div class="style_left">
							<img src="img/3-left.jpg"style="width: 100%;height: 600px;" />
						</div>
						<div class="style_right">
							<div class="jian_3">
								<img src="img/3-big-1.jpg" alt="" />
								<img src="img/3-big-2.jpg" alt="" />
								<img src="img/3-big-3.jpg" alt="" />
								<img src="img/3-big-4.jpg" alt="" />
								<img src="img/3-big-5.jpg" alt="" />
								<img src="img/3-big-6.jpg" alt="" />
								<img src="img/3-big-7.jpg" alt="" />
							</div>
							<div class="yue_3">
								<img src="img/3-big-1.jpg" alt="" />
								<img src="img/3-big-2.jpg" alt="" />
								<img src="img/3-big-3.jpg" alt="" />
								<img src="img/3-big-4.jpg" alt="" />
								<img src="img/3-big-5.jpg" alt="" />
								<img src="img/3-big-6.jpg" alt="" />
								<img src="img/3-big-7.jpg" alt="" />
							</div>
						</div>
					</li>
					<!--雅致古典-->
					<li>
						<div class="style_left">
							<img src="img/4-left.jpg"style="width: 100%;height: 600px;" />
						</div>
						<div class="style_right">
							<div class="jian_4">
								<img src="img/4-big-1.jpg" alt="" />
								<img src="img/4-big-2.jpg" alt="" />
								<img src="img/4-big-3.jpg" alt="" />
								<img src="img/4-big-4.jpg" alt="" />
								<img src="img/4-big-5.jpg" alt="" />
								<img src="img/4-big-6.jpg" alt="" />
								<img src="img/4-big-7.jpg" alt="" />
							</div>
							<div class="yue_4">
								<img src="img/4-big-1.jpg" alt="" />
								<img src="img/4-big-2.jpg" alt="" />
								<img src="img/4-big-3.jpg" alt="" />
								<img src="img/4-big-4.jpg" alt="" />
								<img src="img/4-big-5.jpg" alt="" />
								<img src="img/4-big-6.jpg" alt="" />
								<img src="img/4-big-7.jpg" alt="" />
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="fanhui">
				<p>定制客服 <span style="float: right;">></span></p>
				<p>我要咨询 <span style="float: right;">></span></p>
				<p>优惠活动 <span style="float: right;">></span></p>
				<p class="fan">返回顶部 </p>
			</div>
			<div class="foot"></div>
	</body>
</html>
<script type="text/javascript">
	$(function(){
		$('.top').load('header.html')
		$('.foot').load('footer.html')
		
		$('.feng li').eq(0).mouseenter(function(){
			$('.feng li').removeClass()
			$('.feng li').eq(0).addClass('feng_1')
		})
		$('.feng li').eq(1).mouseenter(function(){
			$('.feng li').removeClass()
			$('.feng li').eq(1).addClass('feng_2')
		})
		$('.feng li').eq(2).mouseenter(function(){
			$('.feng li').removeClass()
			$('.feng li').eq(2).addClass('feng_3')
		})
		$('.feng li').eq(3).mouseenter(function(){
			$('.feng li').removeClass()
			$('.feng li').eq(3).addClass('feng_4')
		})
		
		
		$('.style_right').mouseenter(function(){
			$('.yue').stop().slideDown()
			$('.yue_2').stop().slideDown()
			$('.yue_3').stop().slideDown()
			$('.yue_4').stop().slideDown()
		})
		$('.style_right').mouseleave(function(){
			$('.yue').stop().slideUp()
			$('.yue_2').stop().slideUp()
			$('.yue_3').stop().slideUp()
			$('.yue_4').stop().slideUp()
		})
		
		$('.liao').click(function(){
			window.location.href='example.html'
		})
		setInterval(function(){
			$('.re').fadeOut()
		},1500)
		setInterval(function(){
			$('.re').css('background','orange').fadeIn()
		},1500)
		
		
		
		$('.feng li').mouseenter(function(){
			$('.style_cont li').hide()
			$('.style_cont li').eq($(this).index()).show()
		})
		
		
		
		$('.yue img').mouseenter(function(){
			$('.jian img').hide()
			$('.jian img').eq($(this).index()).show()
		})
		$('.yue_2 img').mouseenter(function(){
			$('.jian_2 img').hide()
			$('.jian_2 img').eq($(this).index()).show()
		})
		$('.yue_3 img').mouseenter(function(){
			$('.jian_3 img').hide()
			$('.jian_3 img').eq($(this).index()).show()
		})
		$('.yue_4 img').mouseenter(function(){
			$('.jian_4 img').hide()
			$('.jian_4 img').eq($(this).index()).show()
		})
		
		
		$('.fanhui p').mouseenter(function(){
			$(this).stop().animate({
				right:'20px'
			});
		})
		$('.fanhui p').mouseleave(function(){
			$(this).stop().animate({
				right:'0px'
			});
		})
		   $('.fanhui').hide();        //隐藏go to top按钮

        $(window).scroll(function(){
             // console.log($(this).scrollTop());

            //当window的scrolltop距离大于1时，go to 
            if($(this).scrollTop() > 100){
                 $('.fanhui').fadeIn();
             }else{
                 $('.fanhui').fadeOut();
             }
         });

         $('.fan').click(function(){
             $('html ,body').animate({scrollTop: 0}, 300);
             return false;
         });
 

	})
</script>